<template>
	<view>
		<view class="detail-box">
			<view class="video-box" v-if="detailArry.has_video==true">
				<!-- <block v-for="item in detailArry.videos" :key="index"> --> 
					<view class="cover" v-show="coverShow">
						<image :src="detailArry.images.small" mode="widthFix"></image>
						<button @tap="videoPlay"><text>||</text></button>
					</view>
					<view class="video" v-show="videoShow">
						<video src="http://baobab.kaiyanapp.com/api/v1/playUrl?vid=158495&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss" 
						controls
						autoplay="true"
						@waiting="vWating"
						></video>	
					</view>
				<!-- </block> -->
					
			</view>
			<view v-if="detailArry.has_video==false" class="no-video">
				<image :src="detailArry.images.small" mode="widthFix"></image>
			</view>
			<view class="top-icon" @tap="save">
				<image :src="saveState==false?'../../static/icons/save_icon.png':'../../static/icons/saved_icon.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="movie-infor">
			<view class="title">
				<view class="title-left">
					<text>{{detailArry.title}}</text>
					<text class="year">{{detailArry.countries}}</text>
				</view>
				<view class="title-right">{{detailArry.rating.average}}</view>
				
			</view>
			<view class="genres">
				<text v-for="item in detailArry.genres" :key="index">{{item}}</text>
			</view>
		</view>
		<view class="movie-about">
			<scroll-view scroll-y="true">
				<view class="same-title wrap">
					<view class="title-left">
						<text>影片简介</text>
					</view>
				</view>
				<view class="summary wrap">{{detailArry.summary}}</view>
				<view class="same-title wrap">
					<view class="title-left">
						<text>所有演员</text>
					</view>
				</view>
				<view class="casts">
					<view class="thumbial" v-for="item in detailArry.casts" :key="item.id">
						<navigator :url="'../casts/casts?id='+item.id">
							<view class="thumbial-img">
								<image :src="item.avatars.small" mode="widthFix"></image>
							</view>
							<view class="thumbial-body">
								<text>{{item.name}}</text>
							</view>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				detailArry: [],
				coverShow: true,
				videoShow: false,
				saveState: false
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.detail();
			console.log(JSON.parse(global.Store.getStores('save')))
		},
		onShow() {
			var saveInfor = JSON.parse(global.Store.getStores('save'));
			for (var i=0; i<saveInfor.length; i++) 
			{
				var obj = saveInfor[i];
				if (obj.id == this.id) {
					this.saveState = obj.flag;
				} 
			}
		},
		methods: {
			detail: function() {
				let subject = global.BaseList.detail;
				this.$http.get(subject+'/'+this.id).then(res=>{
					this.detailArry = res;
					// console.log(this.detailArry)
				})
			},
			vWating: function() {
				uni.showToast({
					title: '视频缓冲中...',
					duration: 1000
				});
			},
			videoPlay: function () {
				this.coverShow = false;
				this.videoShow = true;
			},
			save: function () {
				this.saveState = !this.saveState;
				
				let flag = true;
				for (let i=0; i<global.Store.getStores('save').length; i++) {
					let obj = global.Store.getStores('save')[i];
					if (obj.id == this.id) {
						obj.flag = this.saveState;
						flag = false;
					} 
				}	
				
				let saveArr = JSON.parse(global.Store.getStores('save'))||[];
					saveArr.push({
						id: this.id,
						imgurl: this.detailArry.images.small,
						text: this.detailArry.title,
						flag: this.saveState
					});
				if (flag) {
					global.Store.stetStores('save',JSON.stringify(saveArr))
				}
				if(this.saveState==true){
					uni.showToast({
						title: '收藏成功',
						icon: 'none'
					})
				}else{
					uni.showToast({
						title: '取消收藏',
						icon: 'none'
					})
				}
				
			}
		}
	}
</script>

<style>
	.video-box,.detail-box{
		position: relative;
		width: 100%;
		height: 500upx;
		background-color: #DDDDDD;
		overflow: hidden;
	}
	.video-box video{
		display: block;
		width: 100%;
		height: 100%;
	}
	.cover{
		position: relative;
		height: 100%;
		overflow: hidden;
	}
	.cover image,
	.cover button{
		display: block;
		position: absolute;
	}
	.cover image{
		width: 100%;
	}
	.cover button{
		top: 50%;
		left: 50%;
		z-index: 9;
		margin-left: -75upx;
		margin-top: -75upx;
		width: 150upx;
		height: 150upx;
		border-radius: 50%;
		border: 4px solid #eee;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0,0,0,0.2);
	}
	.cover button text{
		color: #fff;
		font-size: 50upx;
		font-weight: bold;
	}
	.video{
		height: 100%;
	}
	.no-video image{
		display: block;
		width: 100%;
	}
	.movie-infor{
		padding: 14upx 20upx;
		background-color: #333;
		color: #fff;
		line-height: 26px;
	}
	.movie-infor .title{
		font-size: 38upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.movie-infor .title-left{
		display: flex;
		align-items: center;
	}
	.movie-infor .title .year{
		margin-left: 20upx;
		font-size: 28upx;
		color: orange;
	}
	.movie-infor .title-right{
		color: orange;
	}
	.genres{
		padding-top: 14upx;
		font-size: 22upx;
		color: orange;
	}
	.genres text{
		margin-right: 14upx;
		padding: 8upx;
		border: 1px solid orange;
		border-radius: 4px;
	}
	.summary{
		font-size: 30upx;
		line-height: 22px;
		text-indent: 40upx;
		color: #444;
	}
	.thumbial{
		display: inline-block;
		width: 210upx;
	}
	.thumbial-img{
		height: 240upx;
	}
	.top-icon{
		position: absolute;
		top: 40upx;
		right: 40upx;
		z-index: 999;
		width: 70upx;
		height: 70upx;
		border-radius: 50%;
		background-color: rgba(0,0,0,0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.top-icon image{
		display: block;
		width: 60%;
	}
</style>
